<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加分类</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
	<div class="layui-form-item">		
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">分类ID：</label>
			<div class="layui-input-inline" id="ids" style="width:190px; padding-top: 10px;">

			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">分类名称：</label>
			<div class="layui-input-inline">
				<input type="text" name="name" id="name" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">是否启用：</label>
			<div class="layui-input-inline" style="width:190px;">
				<input id="stateS" name="stateS" type="checkbox" class="switch_checked" lay-filter="stateS" lay-skin="switch" lay-text="启用|关闭" checked>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:70px;">分类图片：</label>
			<div class="layui-input-inline" style="width:190px;">
								<div class="layui-upload">
                                    <button type="button" class="layui-btn" id="btnPic">上传主图</button>
                                    <input type="hidden" class="proImg" id="pic" name="pic" value="proImg"/>
                                    <div class="layui-upload-list  one-img">
                                        <img class="layui-upload-img" id="demoText" width="100px" height="100px">
                                        <p id="demoTextPic"></p>
                                    </div>
                                </div>

			</div>
		</div>
		<div class="layui-form-item layui-hide">
			<input type="text" id="id" value="0">
			<input type="text" id="state" value="1">
			<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-back-submit" value="确认">
		</div>
  </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/layui/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script>

	var form1;

    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function(){
        var $ = layui.$
            ,form = layui.form ;
        var $ = layui.jquery
            , upload = layui.upload;

        form.on('switch(stateS)',function (data) {
            //开关是否开启，true或者false
            var checked = data.elem.checked;
            if(checked) {
                $("#state").val(1);
            }
            else
            {
                $("#state").val(0);
            }
        });
        form1=form;
    })

    $(function(){

        var id = $.getUrlParam("id");
        if(id==null)
        {
            alert("参数错误!!");
        }
        else {
            $("#ids").html(id);
            $("#id").val(id);
            $.ajax({
                type: "POST",
                url: "/goodsjson",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(GetJsonDataS1(id)),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.code == "000000") {
                        $("#name").val(data.data.name);
                        $("#pic").val(data.data.pic);
                        $("#demoText").attr("src",data.data.pic);
                        if(data.data.state==0)
						{
						    $("#state").val(0);
                            $("#stateS").removeAttr('checked');
                            form1.render();
                        }
                    }
                    else {
                        alert(data.errorDetail);
                    }
                },
                error: function (message) {
                    alert("提交数据失败！"+message);
                }
            });
        }
    });

    function GetJsonDataS1(id,state) {
        var json = {
            "url": "Classification/Self",
            "parm":{"id":id}
        };
        return json;
    }

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //代表图上传
        var uploadInst = upload.render({
            elem: '#btnPic'
            ,url: '/UploadFile'
            ,accept: 'images' //允许上传的文件类型
            ,size: 500 //最大允许上传的文件大小
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#demoPic').attr('src', result); //图片链接（base64）
                // });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    $("#pic").val(res.fileName);
                    $('#demoText').attr('src', res.fileName);
                    return layer.msg('上传成功');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoTextPic = $('#demoTextPic');
                demoTextPic.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoTextPic.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });



    });
</script>
</body>
</html>